<template>
  <yd-layout class="page-room" v-if="isReady">
    <div class="page-title">
      <span>{{ $t("message.biddingRoom") }}</span>
      <lang></lang>
    </div>
    <div class="case__info">
      <h3 class="case__info-title">{{ info.case_name }}</h3>
      <div class="case__info__container">
        <p class="case__info__item">
          <span class="case__info-label"
            >{{
              info.bidding_state.value === 4
                ? $t("message.distanceBiddingStartTime")
                : $t("message.distanceBiddingEndTime")
            }}：</span
          >
          <yd-countdown
            class="case__info-countDown"
            :time="countDown"
            timetype="second"
            :format="
              '{%d}' +
                $t('message.day') +
                '{%h}' +
                $t('message.hour') +
                '{%m}' +
                $t('message.minute') +
                '{%s}' +
                $t('message.second')
            "
          ></yd-countdown>
        </p>
        <p class="case__info__item align-items-start">
          <span class="case__info-label">{{ $t("message.amountDescription") }}：</span>
          <span class="case__info-text">{{ offerDesc }}</span>
        </p>
        <p class="case__info__item">
          <span class="case__info-label">{{ $t("message.method") }}：</span>
          <span class="case__info-text">{{
            info.bidding_type.value == 1 ? $t("message.upBid") : $t("message.downBid")
          }}</span>
        </p>
      </div>
    </div>
    <div class="case__detail">
      <h4 class="case__detail-title">{{ $t("message.biddingDetails") }}</h4>
      <div class="case__detail__tableContainer">
        <table class="case__detail__table" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <th>{{ $t("message.itemNumber") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ index + 1 }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.caseOrName") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ list.name }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.describe") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ list.describe }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.startingPrice") + "(" + unit + ")" }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ list.begin_price | base64Decode }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.priceRange") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ list.price_range }}
                {{ info.bidding_tenet_unit.value == 1 ? $t("message.yuan") : "%" }}
              </td>
            </tr>
            <tr class="text-main" v-if="ranking">
              <th>{{ $t("message.bidAmount") + "(" + unit + ")" }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                <span v-if="list.priceList.length > 0"
                  >{{ list.priceList[0].bidding_price | base64Decode }}
                </span>
                <span v-else>{{ $t("message.notYetBid") }}</span>
              </td>
            </tr>
            <tr class="text-main" v-if="ranking">
              <th>{{ $t("message.ranking") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                <span>{{
                  ranking[info.suppliers[0].supplier_id + "-" + list.id]
                    ? ranking[info.suppliers[0].supplier_id + "-" + list.id].rank
                    : $t("message.notYetBid")
                }}</span>
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.bidHistory") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                <ul class="webSocket__bidRecord__container" v-if="list.priceList.length > 0">
                  <li
                    class="webSocket__bidRecord-list"
                    v-for="(lis, inde) in list.priceList"
                    :key="inde"
                  >
                    <span class="offer-price"
                      >{{ lis.bidding_price | base64Decode }} {{ unit }}</span
                    >
                    <br />
                    <span class="offer-time">{{ lis.opAt | timeFormat5 }}</span>
                  </li>
                </ul>
                <div v-else>{{ $t("message.notYetBid") }}</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="case__explain">
      <h4 class="case__explain-title">{{ $t("message.description") }}</h4>
      <div class="case__explain__container">
        <p class="case__explain__item">
          <span class="case__explain-label">{{ $t("message.buyType") }}：</span>
          <span class="case__explain-text">{{
            info.buy_type == "BUY_TYPE_MESSAGE" ? $t("message.info") : $t("message.engineering")
          }}</span>
        </p>
        <p class="case__explain__item">
          <span class="case__explain-label">{{ $t("message.area") }}：</span>
          <span class="case__explain-text">{{ info.bidding_area_name }}</span>
        </p>
        <p class="case__explain__item">
          <span class="case__explain-label">{{ $t("message.inquiryNumber") }}：</span>
          <span class="case__explain-text">{{ info.inquiry_bill_no }}</span>
        </p>
        <div class="case__explain__item align-items-start">
          <span class="case__explain-label">{{ $t("message.principle") }}：</span>
          <p>
            <span class="case__explain-label">{{ $t("message.type") }}：</span>
            <span class="case__explain-text">{{
              info.bidding_tenet_type.value == 1
                ? $t("message.britishStyle")
                : $t("message.sealType")
            }}</span
            >&nbsp;
            <span class="case__explain-label f-group"
              >{{ $t("message.priceRegulatingUnit") }}：</span
            >
            <span class="case__explain-text">{{
              info.bidding_tenet_unit.value == 1
                ? $t("message.amountOfMoney")
                : $t("message.percentage")
            }}</span
            >&nbsp;
            <span class="case__explain-label f-group">{{ $t("message.priceRange") }}：</span>
            <span class="case__explain-text">{{
              info.bidding_tenet_range.value == 1 ? $t("message.fixed") : $t("message.unFixed")
            }}</span>
          </p>
        </div>
        <p class="case__explain__item align-items-start">
          <span class="case__explain-label">{{ $t("message.amountDescription") }}：</span>
          <span class="case__explain-text">{{ offerDesc }}</span>
        </p>
        <p class="case__explain__item">
          <span class="case__explain-label">{{ $t("message.method") }}：</span>
          <span class="case__explain-text">{{
            info.bidding_type.value == 1 ? $t("message.upBid") : $t("message.downBid")
          }}</span>
        </p>
        <p class="case__explain__item">
          <span class="case__explain-label">{{ $t("message.currency") }}：</span>
          <span class="case__explain-text">{{ info.bidding_money_type }}</span>
        </p>
        <p class="case__explain__item">
          <span class="case__explain-label">{{ $t("message.department") }}：</span>
          <span class="case__explain-text">{{ info.bidding_department }}</span>
        </p>
        <p class="case__explain__item" v-if="info.bidding_note">
          <span class="case__explain-label">{{ $t("message.conditions") }}：</span>
          <span class="case__explain-text">{{ info.bidding_note }}</span>
        </p>
      </div>
    </div>

    <div id="imgscode"></div>

    <button
      slot="bottom"
      class="btn-offer"
      @click="offerEvent"
      v-if="info.bidding_state.value === 6"
    >
      {{ $t("message.iWantToBid") }}
    </button>
    <!-- 出价弹窗 -->
    <yd-popup v-model="isOfferShow" position="bottom">
      <div class="offer__popup">
        <h3 class="offer__popup-title">{{ info.case_name }}</h3>
        <div class="offer__popup_container">
          <div class="offer__popup_item">
            <span class="offer__popup_item-label">{{ $t("message.itemNumber") }}</span>
            <div class="offer__popup_item-selectWrap">
              <select
                class="offer__popup_item-select needsclick"
                v-model="popupSelectIndex"
                @change="bodyScroll"
              >
                <option :value="index" v-for="(list, index) in info.details" :key="index">{{
                  index + 1
                }}</option>
              </select>
            </div>
          </div>
          <div class="offer__popup_item">
            <span class="offer__popup_item-label">{{ $t("message.caseOrName") }}</span>
            <span class="offer__popup_item-text">{{ info.details[popupSelectIndex].name }}</span>
          </div>
          <div class="offer__popup_item">
            <span class="offer__popup_item-label">{{ $t("message.lastBid") }}</span>
            <span class="offer__popup_item-text">{{
              lastPrice !== null ? lastPrice + unit : $t("message.notYetBid")
            }}</span>
          </div>
          <div class="offer__popup_item">
            <span class="offer__popup_item-label">{{ $t("message.priceRange") }}</span>
            <span class="offer__popup_item-text"
              >{{ info.details[popupSelectIndex].price_range }}
              {{ info.bidding_tenet_unit.value == 1 ? $t("message.yuan") : "%" }}</span
            >
          </div>
          <div class="offer__popup_item">
            <span class="offer__popup_item-label">{{ $t("message.adjustmentCoefficient") }}</span>
            <input
              type="number"
              class="offer__popup_item-select"
              v-model="offerRatio"
              :placeholder="$t('message.bidCoefficientPlaceholder')"
              @blur="bodyScroll"
            />
          </div>
          <div class="offer__popup_item">
            <span class="offer__popup_item-label">{{ $t("message.bidAmount") }}</span>
            <span class="offer__popup_item-text">{{ nowOfferPrice }} </span>
          </div>
          <div class="offer__popup_item" v-show="invalidPrice">
            <span class="offer__popup_item-label"></span>
            <span class="offer__popup_item-text f-invalidPrice">{{
              $t("message.invalidPrice")
            }}</span>
          </div>
          <!-- <div class="offer__popup_item">
            <span class="offer__popup_item-label"> {{ $t("message.dotRobot") }}</span>
            <input type="checkbox" v-model="isNotRobot" />
          </div> -->
        </div>
        <button
          :class="{
            'btn-offer': true,
            'f-disabled': invalidPrice
          }"
          @click="offerMainEvent"
        >
          {{ $t("message.immediateBid") }}
        </button>
      </div>
    </yd-popup>
    <!-- 弹窗信息 -->
    <alert :messagePopup.sync="child_messagePopup"> </alert>

    <!-- 选择币别 -->
    <yd-popup class="dialogCurrency" v-model="isShow2" position="center" :close-on-masker="false">
      <yd-cell-group :title="$t('message.selectCuyyency')">
        <yd-cell-item type="radio" v-for="(item, index) in rateList" :key="index">
          <span slot="left">{{ item.cuyyency }}</span>
          <input slot="right" type="radio" :value="item.cuyyency" v-model="cuyyency" />
        </yd-cell-item>
      </yd-cell-group>
    </yd-popup>
  </yd-layout>
  <div class="skeleton__detail" v-else>
    <div class="skeleton__detail-bigTitle"></div>
    <div class="skeleton__detail__container">
      <h4 class="skeleton__detail-title"></h4>
      <p class="skeleton__detail-info speed-1"></p>
      <p class="skeleton__detail-info speed-2"></p>
      <p class="skeleton__detail-info speed-3"></p>
    </div>
    <div class="skeleton__detail__container">
      <h4 class="skeleton__detail-title"></h4>
      <table class="skeleton__detail-table" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <th></th>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th></th>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th></th>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th></th>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th></th>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th></th>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { api__getInfo, api__changeCurrency } from "../api";
import { Base64 } from "js-base64";
import lang from "../components/lang";
import alert from "../components/alert";

export default {
  name: "room",
  components: {
    lang,
    alert,
  },
  created() {
    this.initPageData(true);
  },
  data() {
    return {
      cuyyency: "",
      rateList: [],
      isShow2: false,
      isNotRobot: false,
      // 报错弹窗
      child_messagePopup: {
        isShow: false,
        type: "success",
        title: "标题",
        text: "描述",
      },
      isReady: false,
      isOnOpen: false,
      isOfferShow: false, // 出价弹窗的显示
      popupSelectIndex: 0, // 当前选择哪个项次进行出价
      offerRatio: "",
      countDown: 3600, // 倒计时时间
      info: {}, // 标案一些信息
      ws: null, // 链接的websocket
      ranking: null, // 上一次出价的信息
    };
  },
  watch: {
    async cuyyency(value, old) {
      try {
        await api__changeCurrency({
          currency: value,
          caseId: this.$route.params.id,
        });
        this.isShow2 = false;
        this.info.suppliers[0].currency=value;
      } catch (error) {
        console.log(error);
      }
    },
  },
  computed: {
    // 上一次出价
    lastPrice: function() {
      if (this.ranking) {
        // 上一次出价 如果对于该标案首次出价 则返回null
        if (this.info.details[this.popupSelectIndex]) {
          if (
            this.ranking[
              this.info.suppliers[0].supplier_id +
                "-" +
                this.info.details[this.popupSelectIndex].id
            ]
          ) {
            return (
              parseFloat(
                Base64.decode(
                  this.ranking[
                    this.info.suppliers[0].supplier_id +
                      "-" +
                      this.info.details[this.popupSelectIndex].id
                  ].price
                )
              ) / 1000
            );
          }
        }
      }
      return null;
    },
    // 出价金额计算 注意很复杂
    nowOfferPrice: function() {
      if (this.offerRatio) {
        // 有上一次出价 就使用上一次出价 不然就使用 起始价格 （注: 针对于首次出价）
        let baginPrice =
          parseFloat(
            Base64.decode(this.info.details[this.popupSelectIndex].begin_price)
          ) / 1000;
        let lastPrice = this.lastPrice ? this.lastPrice : baginPrice;
        let nowOfferPrice = NaN;
        if (this.info.bidding_tenet_type.value == 1) {
          // 英式
          if (this.info.bidding_tenet_unit.value == 1) {
            // 金额
            if (this.info.bidding_tenet_range.value == 1) {
              // 固定幅度
              if (this.info.bidding_type.value == 1) {
                //向上出价
                nowOfferPrice =
                  lastPrice +
                  this.info.details[this.popupSelectIndex].price_range *
                    this.offerRatio;
              } else {
                // 向下出价
                nowOfferPrice =
                  lastPrice -
                  this.info.details[this.popupSelectIndex].price_range *
                    this.offerRatio;
              }
            } else if (this.info.bidding_tenet_range.value == 2) {
              // 不固定幅度

              if (this.info.bidding_type.value == 1) {
                //向上出价
                nowOfferPrice = lastPrice + this.offerRatio;
              } else {
                // 向下出价
                nowOfferPrice = lastPrice - this.offerRatio;
              }
            }
          } else if (this.info.bidding_tenet_unit.value == 2) {
            // 百分比
            if (this.info.bidding_tenet_range.value == 1) {
              // 固定幅度
              if (this.info.bidding_type.value == 1) {
                //向上出价
                nowOfferPrice =
                  lastPrice +
                  ((baginPrice * this.offerRatio) / 100) *
                    this.info.details[this.popupSelectIndex].price_range;
              } else {
                // 向下出价
                nowOfferPrice =
                  lastPrice -
                  ((baginPrice * this.offerRatio) / 100) *
                    this.info.details[this.popupSelectIndex].price_range;
              }
            } else if (this.info.bidding_tenet_range.value == 2) {
              // 不固定幅度
              if (this.info.bidding_type.value == 1) {
                //向上出价
                nowOfferPrice =
                  lastPrice + (baginPrice * this.offerRatio) / 100;
              } else {
                // 向下出价
                nowOfferPrice =
                  lastPrice - (baginPrice * this.offerRatio) / 100;
              }
            }
          }
        } else if (this.info.bidding_tenet_type.value == 2) {
          // 密封式OPEN
          if (this.info.bidding_tenet_unit.value == 1) {
            // 金额
            if (this.info.bidding_tenet_range.value == 1) {
              // 固定幅度
              if (this.info.bidding_type.value == 1) {
                //向上出价
                nowOfferPrice =
                  lastPrice +
                  this.info.details[this.popupSelectIndex].price_range *
                    this.offerRatio;
              } else {
                // 向下出价
                nowOfferPrice =
                  lastPrice -
                  this.info.details[this.popupSelectIndex].price_range *
                    this.offerRatio;
              }
            } else if (this.info.bidding_tenet_range.value == 2) {
              // 不固定幅度
              if (this.info.bidding_type.value == 1) {
                //向上出价
                nowOfferPrice = lastPrice + this.offerRatio;
              } else {
                // 向下出价
                nowOfferPrice = lastPrice - this.offerRatio;
              }
            }
          } else if (this.info.bidding_tenet_unit.value == 2) {
            // 百分比
            if (this.info.bidding_tenet_range.value == 1) {
              // 固定幅度
              if (this.info.bidding_type.value == 1) {
                //向上出价
                nowOfferPrice =
                  lastPrice +
                  ((baginPrice * this.offerRatio) / 100) *
                    this.info.details[this.popupSelectIndex].price_range;
              } else {
                // 向下出价
                nowOfferPrice =
                  lastPrice -
                  ((baginPrice * this.offerRatio) / 100) *
                    this.info.details[this.popupSelectIndex].price_range;
              }
            } else if (this.info.bidding_tenet_range.value == 2) {
              // 不固定幅度
              if (this.info.bidding_type.value == 1) {
                //向上出价
                nowOfferPrice =
                  lastPrice + (baginPrice * this.offerRatio) / 100;
              } else {
                // 向下出价
                nowOfferPrice =
                  lastPrice - (baginPrice * this.offerRatio) / 100;
              }
            }
          }
        }

        if (this.info.bidding_tenet_unit.value == 2) {
          return parseFloat(nowOfferPrice).toFixed(2) + " " + this.unit;
        } else {
          return nowOfferPrice + " " + this.unit;
        }
      } else {
        return null;
      }
    },
    // 出价金额说明
    offerDesc: function() {
      let baseText =
        this.$t("message.bidAmount") + "=" + this.$t("message.lastBidAmount");
      if (this.info.bidding_type) {
        baseText += this.info.bidding_type.value == 1 ? " +" : " -";
      }
      if (
        this.info.bidding_tenet_type.value == 1 &&
        this.info.bidding_tenet_unit.value == 1 &&
        this.info.bidding_tenet_range.value == 1
      ) {
        baseText +=
          "（" +
          this.$t("message.fixedAmplitudeModulation") +
          "*" +
          this.$t("message.adjustmentCoefficient") +
          "）";
      } else if (
        this.info.bidding_tenet_type.value == 1 &&
        this.info.bidding_tenet_unit.value == 1 &&
        this.info.bidding_tenet_range.value == 2
      ) {
        baseText += this.$t("message.inputPrice");
      } else if (
        this.info.bidding_tenet_type.value == 1 &&
        this.info.bidding_tenet_unit.value == 2 &&
        this.info.bidding_tenet_range.value == 1
      ) {
        baseText +=
          "（" +
          this.$t("message.startingPrice") +
          "*" +
          this.$t("message.percentageAmplitudeModulation") +
          "*" +
          this.$t("message.adjustmentCoefficient") +
          "）";
      } else if (
        this.info.bidding_tenet_type.value == 1 &&
        this.info.bidding_tenet_unit.value == 2 &&
        this.info.bidding_tenet_range.value == 2
      ) {
        baseText +=
          "（" +
          this.$t("message.startingPrice") +
          "*" +
          this.$t("message.inputPercentage") +
          " ）";
      } else if (
        this.info.bidding_tenet_type.value == 2 &&
        this.info.bidding_tenet_unit.value == 1 &&
        this.info.bidding_tenet_range.value == 1
      ) {
        baseText +=
          "（" +
          this.$t("message.fixedAmplitudeModulation") +
          "*" +
          this.$t("message.adjustmentCoefficient") +
          "）";
      } else if (
        this.info.bidding_tenet_type.value == 2 &&
        this.info.bidding_tenet_unit.value == 1 &&
        this.info.bidding_tenet_range.value == 2
      ) {
        baseText += this.$t("message.inputPrice");
      } else if (
        this.info.bidding_tenet_type.value == 2 &&
        this.info.bidding_tenet_unit.value == 2 &&
        this.info.bidding_tenet_range.value == 1
      ) {
        baseText +=
          "（" +
          this.$t("message.startingPrice") +
          "*" +
          this.$t("message.percentageAmplitudeModulation") +
          "*" +
          this.$t("message.adjustmentCoefficient") +
          "）";
      } else if (
        this.info.bidding_tenet_type.value == 2 &&
        this.info.bidding_tenet_unit.value == 2 &&
        this.info.bidding_tenet_range.value == 2
      ) {
        baseText +=
          "（" +
          this.$t("message.startingPrice") +
          "*" +
          this.$t("message.inputPercentage") +
          "）";
      }

      return baseText;
    },
    // 价格
    unit: function() {
      if (this.info.bidding_money_type == "RMB") {
        return this.$t("message.yuan");
      } else if (this.info.bidding_money_type == "TWD") {
        return this.$t("message.xtw");
      } else if (this.info.bidding_money_type == "USD") {
        return this.$t("message.dollar");
      } else {
        return "";
      }
    },
    // 对于向下出价 是无效价格
    invalidPrice: function() {
      return this.nowOfferPrice &&
        this.info.bidding_type.value == 2 &&
        parseFloat(this.nowOfferPrice) <= 0
        ? true
        : false;
    },
  },
  methods: {
    // 初始化页面数据
    async initPageData(isFirst) {
      try {
        let { data } = await api__getInfo(this.$route.params.id);
        this.info = data.case;

        // 多币别 并且当前人没有设置过币别
        if (
          data.case.multi_currency &&
          data.case.suppliers[0].currency === null
        ) {
          this.isShow2 = true;
          this.$set(this, "rateList", data.rateList);
        }
        if (this.info.bidding_state.value === 4) {
          this.countDown = data.case.begin_at - data.nowTime; // 未开始倒计时时间
        } else {
          this.countDown = data.lastTotalTime - data.nowTime; // 已开始倒计时时间
        }
        for (let i in data.ranking) {
          // 如果该厂商上一次有出价 我们就要展现上一次出价的金额 后台传过来的是一个对象 但是可能没有key
          this.ranking = data.ranking;
        }

        this.isReady = true;
        if (isFirst) this.initWebSocket(data); // 是第一次初始化页面 才去初始化websoket
      } catch (err) {
        this.child_messagePopup = {
          isShow: true,
          type: "error",
          title: this.$t("message.tips"),
          text: err.msg,
        };
      }
    },
    // 页面：点击我要出价按钮 展示弹窗
    offerEvent() {
      //   $.imgcode({
      //     frontimg: "",
      //     backimg: "",
      //     refreshImg: "",
      //     getsuccess: "",
      //     getfail: "",
      //     maskclose: true,
      //     callback: "", // 回调函数
      //     refreshcallback: "",
      //     yHeight: 1
      //   });
      this.isOfferShow = true;
    },
    // 初始化webSckote
    initWebSocket(obj) {
      console.log(obj)
      let bidWsUrl = obj.bidWsUrl,
        bidWsPort = obj.bidWsPort,
        bid = this.$route.params.id,
        uid = obj.case.suppliers[0].supplier_linkman_id,
        sid = this.$storage.get("sid"),
        lang = this.$storage.get("?lang") ? this.$storage.get("lang") : "zh_CN";

      // 初始化一个 WebSocket 对象
      if (process.env.NODE_ENV == "development") {
        this.ws = new ReconnectingWebSocket(
          `ws://${bidWsUrl}:${bidWsPort}/bidding_room?bid=${bid}&uid=${uid}&sid=${sid}&lang=${lang}`
        );
      } else {
        this.ws = new ReconnectingWebSocket(
          `wss://${bidWsUrl}/bidding_room?bid=${bid}&uid=${uid}&sid=${sid}&lang=${lang}`
        );
      }

      // 成功链接后
      this.ws.onopen(() => {
        console.log("链接成功");
        this.isOnOpen = true;
      });

      // 接收服务端数据时触发事件
      this.ws.onmessage = (event) => {
        let { action, data, msg } = JSON.parse(event.data);
        console.log(action)
        if (action == 1006) {
          this.initPageData();
        } else if (
          action == 1003 ||
          action == 1004 ||
          action == 1005 ||
          action == 1008
        ) {
          this.child_messagePopup = {
            isShow: true,
            type: "error",
            title: this.$t("message.tips"),
            text: msg,
          };
          if (action == 1004) setTimeout(() => this.$router.back(), 3000);
        } else if (action == 1007) {
          let { delayed_timestamp, curr_timestamp } = data[
            this.info.suppliers[0].supplier_id +
              "-" +
              this.info.details[this.popupSelectIndex].id
          ];
          this.countDown = delayed_timestamp - curr_timestamp;
        } else if (action == 1009) {
          this.child_messagePopup = {
            isShow: true,
            type: "success",
            title: this.$t("message.bidSuccess"),
            text: "",
          };
          this.initPageData();
        } else if (action == 2003 || action == 2004) {
          location.reload();
        }
      };

      // 断开 web socket 连接成功触发事件
      this.ws.onclose = () => console.log("连接已关闭...");
    },
    // 弹窗：出价按钮点击事件
    offerMainEvent() {

      console.log(this.info)
      console.log(this.info.case);
      console.log(this.nowOfferPrice);
      if (!this.invalidPrice) {
        console.log("----2222");
        // 不能是无效价格
        //let nowOfferPrice = parseFloat(this.nowOfferPrice).toFixed(2); 除去多余的小数点位
        let nowOfferPrice = parseFloat(this.nowOfferPrice);
        let websocketParams = {
          offer_price: Base64.encode(nowOfferPrice),
          item_id: this.info.details[this.popupSelectIndex].id,
          ratio: this.offerRatio,
          action: 2001,
          curreny_type:this.info.suppliers[0].currency,

        };
        this.isOfferShow = false;
        console.log("----333");

        console.log(window.createcode);

        window.createcode(() => {
          this.ws.send(JSON.stringify(websocketParams));
        });
      }
    },
    // 解决原生键盘弹起 影响body位移问题
    bodyScroll() {
      document.body.scrollTop = 0;
    },
  },
  beforeDestroy() {
    this.ws.close();
  },
};
</script>
